<%--
  Author: Albert
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>员工列表</title>
</head>
<body>

<table class="table">
    <thead>
    <tr class="table_header">
        <th>ID</th>
        <th>Name</th>
        <th>Salary</th>
        <th>Age</th>
        <th>Operation</th>
    </tr>
    </thead>
    <tbody>
    <%-- 从后端传来的员工数据列表中，循环取出员工信息并绑定到页面上 --%>
    <c:forEach items="${requestScope.emps}" var="emp">
        <tr class="table_row">
            <td>${emp.id}</td>
            <td>${emp.name}</td>
            <td>${emp.salary}</td>
            <td>${emp.age}</td>
            <td>
                    <%-- 携带员工id，请求调用后端接口 - 删除员工 --%>
                <a href="${pageContext.request.contextPath}/emp/delete?id=${emp.id}">删除</a>&nbsp;
                    <%-- 携带员工id，请求调用后端接口 - 修改员工 --%>
                <a href="${pageContext.request.contextPath}/emp/findOne?id=${emp.id}">修改</a>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<p>
    <%-- 请求调用后端接口 - 添加员工 --%>
    <input type="button" class="button" value="添加"
           onclick="location.href='${pageContext.request.contextPath}/addEmp.jsp'"/>
    <br>
    <br>
    <%-- 请求调用后端接口 - 退出登录 --%>
    <input type="button" class="button" value="退出登录"
           onclick="location.href='${pageContext.request.contextPath}/emp/logOut'"/>
</p>

<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f4f4f9;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .table_header {
        background-color: #f2f2f2;
    }

    .table_header th {
        padding: 10px;
        text-align: left;
        border-bottom: 2px solid #ddd;
    }

    .table_row {
        background-color: #fff;
    }

    .table_row td {
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

    .button {
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        display: block;
        width: 100%;
        text-align: center;
    }

    .button:hover {
        background-color: #0056b3;
    }
</style>

</body>
</html>